<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>GoDisk - 一个基于beego构建的web存储应用！ </title>
    <meta name="keywords" content="GoDisk,beego,golang,layui">
    <meta name="description" content="GoDisk - 一个基于beego构建的web存储应用！帮你快速部署存储服务">
    <link rel="stylesheet" href="/static/layui/css/s.css">
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<div class="s-header">
    <div class="layui-container flex space-between">
        <a class="s-header-a" href="/">
            <img src="/static/images/god.png" alt="" class="s-header-logo">
        </a>
        <ul class="s-header-menu">
            <li><a href="./" class="active">首页</a></li>
            <li><a href="https://gitee.com/xuthus5/GoDisk">下载</a></li>
            <li><a href="./login">演示</a></li>
            <li><a href="https://gitee.com/xuthus5/GoDisk">wiki</a></li>
        </ul>
    </div>
</div>
<style>
    .s-header {
        margin: 0 auto;
        justify-content: space-between;
    }

    body {
        height: 100vh;
    }

    .circle1, .circle2, .circle3, .circle4 {
        position: absolute;
        display: block;
        border-radius: 100%;
        z-index: 1;
        animation: floatview 10s infinite;
    }

    .circle1 {
        top: 120px;
        left: 145px;
        width: 50px;
        height: 50px;
        z-index: 2;
        background: #00a6ff;
        background: linear-gradient(180deg, #00a6ff, #00e1ff);
        animation: floatview 8s infinite;
    }

    .circle2 {
        right: 175px;
        top: 30px;
        width: 140px;
        height: 140px;
        background: #2d3ee6;
        background: linear-gradient(180deg, #2d3ee6, #6a77ff);
    }

    .circle3 {
        left: 15px;
        bottom: 150px;
        width: 120px;
        height: 120px;
        background: #1548dc;
        background: linear-gradient(180deg, #1548dc, #2083fe);
    }

    .circle4 {
        right: 15px;
        bottom: 220px;
        width: 90px;
        height: 90px;
        z-index: 2;
        background: #f95c75;
        background: linear-gradient(180deg, #f95c75, #f98e9f);
        animation: floatview 8s infinite;
    }

    @keyframes floatview {
        0% {
            transform: translateY(0)
        }
        50% {
            transform: translateY(20px)
        }
        to {
            transform: translateY(0)
        }
    }

    .main {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 300px);
        justify-content: center;
        align-items: center;
    }

    .fl {
        text-align: center;
        color: rgba(51, 51, 51, 0.8);
        margin-bottom: 40px;
        margin-top: 10px;
        font-size: 24px;
        line-height: 1.5;
        font-weight: 300;
    }

    .sl {
        font-size: 18px;
        text-align: center;
    }

    .bbtn {
        margin-bottom: 30px;
    }

</style>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12 main">
            <span class="circle1"></span>
            <span class="circle2"></span>
            <span class="circle3"></span>
            <span class="circle4"></span>
            <div>
                <img src="/static/images/god.png" alt="">
            </div>
            <div class="text-center">
                <p class="fl">
                    <span>一个基于beego构建的web存储应用</span>
                    <br>
                    <span class="sl">帮你快速部署存储服务</span>
                </p>
            </div>
            <div class="bbtn">
                <a class="layui-btn layui-btn-primary  layui-btn-lg layui-btn-radius" style="width: 170px"
                   href="https://gitee.com/xuthus5/GoDisk" target="_blank"><i
                            class="layui-icon">&#xe656;</i> 下载
                </a>
                <a class="layui-btn layui-btn-warm  layui-btn-lg layui-btn-radius" style="width: 170px"
                   href="./login"><i
                            class="layui-icon">&#xe656;</i> DEMO
                </a>
            </div>
        </div>
    </div>
</div>
<div class="layui-col-md12">
    <div class="s-footer">
        <ul>
            <li><strong>GoDisk </strong></li>
            <li>Version: v0.1</li>
            <li>Last Update:2018-11-9</li>
        </ul>
    </div>
</div>
<script>
    layui.use(['element', 'form', 'jquery', 'upload'], function () {
        var $ = layui.jquery;

        $('.s-subheader a').each(function () {
            filename = location.href.substr(location.href.lastIndexOf('/') + 1);
            if ($(this).attr("href") == filename) {
                $(this).addClass("active");
            }
        });
    });
</script>
</body>
</html>